<template>
  <div class="container" ref="container">
    <div>
      <!--hot-->
      <div class="hot-city">
        <div class="hot-title">热门城市</div>
        <ul class="hot-list">
          <li class="hot-item" @click="changeCityName(item.name)" v-for="item in hotCities" :key="item.id">
            {{ item.name }}
          </li>
        </ul>
      </div>
      <!--sort-->
      <div class="sort-sort">
        <div class="sort-title">字母排序</div>
        <ul class="sort-list">
          <li class="sort-item" v-for="(value,key) in cities" @click="locationCity(key)">{{ key }}</li>
        </ul>
      </div>
      <!--list-->
      <div>
        <div class="city-lists" v-for="(val,key) of cities" :ref="key">
          <div class="city-title">{{ key }}</div>
          <ul class="city-list">
            <li class="city-item" @click="changeCityName(item.name)" v-for="item in val">
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  import { mapMutations } from 'vuex'
  export default {
    props: ['hotCities', 'cities'],
    data(){
      return{
        scroll:''
      }
    },
    mounted(){
      // console.log(this.$refs.container);
      // console.log(this.$refs['container']);
      let container = this.$refs['container'];
      this.scroll = new BScroll(container)
    },
    methods:{
      locationCity(key){
        // console.log(this.$refs[key][0]);
        this.scroll.scrollToElement(this.$refs[key][0],1000)
      },
      changeCityName(cityName){
        //console.log(cityName);
        this.changeCity(cityName);
        this.$router.push('/');
      },
      ...mapMutations(['changeCity']),
    }
  }
</script>
<style scoped lang="stylus">
  @import "~css/common.styl"
  .container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: .88rem;
    overflow: hidden;
    background-color: #f5f5f5;
  }
  /*hot*/
  .hot-title {
    font-size: .24rem;
    padding: .2rem .3rem;
    color: #212121;
  }

  .hot-list {
    background-color: #fff;
    font-size: .28rem;
    position: relative;
    overflow: hidden;
  }

  .hot-list:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 33.33%;
    left: 33.33%;
    border-left: .02rem solid #ddd;
    border-right: .02rem solid #ddd;
  }

  .hot-item {
    position: relative;
    width: 33.33%;
    text-align: center;
    height: .9rem;
    line-height: .9rem;
    float: left;
    border-bottom: .02rem solid #ddd;
  }

  /*sort*/
  .sort-title {
    font-size: .24rem;
    padding: .2rem .3rem;
    color: #212121;
  }

  .sort-list {
    background-color: #fff;
    font-size: .28rem;
    position: relative;
    overflow: hidden;
  }

  .sort-item {
    width: 16.67%;
    text-align: center;
    height: .9rem;
    line-height: .9rem;
    float: left;
  }

  /*list*/
  .city-title {
    font-size: .24rem;
    padding: .2rem .3rem;
    color: #212121;
  }

  .city-list {
    background-color: #fff;
    font-size: .28rem;
    position: relative;
    overflow: hidden;
  }

  .city-list:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 25%;
    left: 25%;
    border-left: .02rem solid #ddd;
    border-right: .02rem solid #ddd;
  }

  .city-list:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    left: 75%;
    border-left: .02rem solid #ddd;
  }

  .city-item {
    position: relative;
    width: 25%;
    text-align: center;
    height: .9rem;
    line-height: .9rem;
    float: left;
    border-bottom: .02rem solid #ddd;
    $textOverflow();
  }
</style>
